<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/5/22
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>新闻列表</title>
    <style>
        #main{
            width: 800px;
            margin: 100px auto;
            border: 1px solid red;
        }
        #main div{
            text-align: center;
        }
        table{
            width: 800px;
            text-align: center;
        }

        #a{
            height: 50px;
            background-color: white;
        }

        tr:nth-child(odd) {
            background-color: #59caf9;
        }

    </style>
</head>
<body>


<div id="main">
    <div>
        <h1>新闻列表</h1>
        <form>
            <div>
                <%-- <c:if test="${not empty requestScope.ebookEntries}">
                     <c:forEach items="${ebookEntries}" var="ebookEntries">--%>



                    <input type="hidden" name="pageNo" value="1" id="pageNo" />
                <%--value="${requestScope.ename}"实现查询后输入回显--%>
                新闻标题:
                <input type="text" name="title" value="${title}" placeholder="" required/>
                <input type="submit" value="查询" />
                <%-- </c:forEach>
             </c:if>--%>
            </div>
            <%--<div>
                &lt;%&ndash;超链接写点击不需写onclick&ndash;%&gt;
               &lt;%&ndash; <a href="javascript:delEmps()">删除多行</a>&ndash;%&gt;
                &lt;%&ndash;<a href="javascript:delEmps()">删除</a>&ndash;%&gt;
                &lt;%&ndash;${pageContext.request.contextPath}获取项目的上下文
                    其实就是项目名称
                &ndash;%&gt;
                <a href="${pageContext.request.contextPath}/jsp/invadd.jsp">添加</a>
            </div>--%>
    </div>
        </form>

    <table border="1" cellspacing="0">
        <tr>
            <%--<td><input type="checkbox" id="checkAll" onclick="checkAlls()" />全选/全不选</td>--%>
            <td>新闻编号</td>

                <td>新闻标题</td>
            <td>新闻摘要</td>
            <td>作者</td>
            <td>创建时间</td>
            <%--<td>上传时间</td>--%>
            <td>操作</td>
            <%--<td>奖金</td>
            <td>部门</td>
            <td>操作</td>--%>
        </tr>

        <c:if test="${not empty requestScope.pageInfo}">
            <c:forEach items="${requestScope.pageInfo.list}" var="newsdetails" varStatus="status">
                <tr>
                    <%--<td><input type="checkbox" name="checkItem" onclick="checkItems()" value="${ebookEntries.id}" /></td>--%>
                        <td>${newsdetails.id}</td>
                        <td>${newsdetails.title}</td>
                    <td>${newsdetails.summary}</td>
                    <td>${newsdetails.author}</td>
                    <%--<td>${invitations.uploaduser}</td>--%>
                    <%--时间格式化--%>
                    <td><fmt:formatDate value="${newsdetails.createdate}" pattern="yyyy年MM月dd日"></fmt:formatDate></td>
                   <%-- <td>${ebookEntries.sal}</td>
                    <td>${ebookEntries.comm}</td>
                    <td>${ebookEntries.deptno}</td>--%>
                    <td>
                        <%--<a href="#">详情</a>--%>
                        <a href="${pageContext.request.contextPath}/comment/comlist?newsid=${newsdetails.id}"> 查看评论</a>
                            <a href="/jsp/invadd.jsp">评论</a>

                        <a href="javascript:deleteInvitation(${newsdetails.id})">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </c:if>


        <c:if test="${empty requestScope.pageInfo.list}">
            <tr>
                <td colspan="10" style="font-size: 20px;font-weight: bold;color: red">没有帖子信息</td>
            </tr>
        </c:if>



        <tr>
            <td colspan="10">
                <div class="page-bar">
                    <div class="page-num-ul clearfix">
                        共${pageInfo.total }条记录&nbsp;&nbsp; ${pageInfo.pageNum }/${pageInfo.pages }页</li>
                        <c:if test="${pageInfo.pageNum > 1}">
                            <a href="javascript:page_nav(document.forms[0],1);">首页</a>
                            <a href="javascript:page_nav(document.forms[0],${pageInfo.pageNum-1});">上一页</a>
                        </c:if>
                        <c:if test="${pageInfo.pageNum < pageInfo.pages }">
                            <a href="javascript:page_nav(document.forms[0],${pageInfo.pageNum+1 });">下一页</a>
                            <a href="javascript:page_nav(document.forms[0],${pageInfo.pages });">最后一页</a>
                        </c:if>
                    </div>
                    <span class="page-go-form"><label>跳转至</label>
                        <!--GO-->
				<input type="hidden" name="" id="totalPageCount" value="${pageInfo.pages }" />
             <input type="text" name="inputPage" id="inputPage" class="page-key" />页
             <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
            </span>
                </div>
            </td>
        </tr>
    </table>
</div>



<script>
    /*
      删除单行数据
    */
    function deleteInvitation(empno) {
        if(confirm("您确认要删除吗?")){
            location.href = "/detail/delete?id="+empno;
        }
    }

    /**
     * 删除多行的点击事件
     *      需要完成的功能是：
     *          1.发送请求到后台
     *          2.把用户选中要删除的id一起发送到后台
     */
    function delEmps() {
        var checkItem = document.getElementsByName("checkItem");
        var ids = new Array();

        for(var i = 0 ; i < checkItem.length ; i++){
            if(checkItem[i].checked){//如果复选框是选择状态
                //获取这个选择状态的复选框的值然后往数组最后一个位置添加元素
                ids.push(checkItem[i].value);
            }
        }

        if(ids.length > 0){
            if(confirm("您确认要删除吗?")){
                location.href = "/emp/delemps?ids="+ids;
            }
        }else{
            alert("没有被选中的元素不能删除");
        }

    }

</script>



<script>
    function page_nav(frm,num) {
        frm.pageNo.value=num;
        frm.submit();
    }

    function jump_to(frm,num) {
        //alert(num);
        //验证用户的输入
        var regexp=/^[1-9]\d*$/;
        var totalPageCount=document.getElementById("totalPageCount").value;
        //alert(totalPageCount);
        if(!regexp.test(num)){
            alert("请输入大于0的正整数!");
            return false;
        }else if((num-totalPageCount)>0){
            alert("请输入小于总页码数的页码");
            return false;
        }else{
            page_nav(frm,num);
        }
    }
</script>

<!--导入js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>

<script>
    /*
      删除单行数据
    */
    function deleEbook(empno) {
        if(confirm("您确认要删除吗?")){
            location.href = "/ebook/delete?id="+empno;
        }
    }

    /**
     * 删除多行的点击事件
     *      需要完成的功能是：
     *          1.发送请求到后台
     *          2.把用户选中要删除的id一起发送到后台
     */
    function delEmps() {
        var checkItem = document.getElementsByName("checkItem");
        var ids = new Array();

        for(var i = 0 ; i < checkItem.length ; i++){
            if(checkItem[i].checked){//如果复选框是选择状态
                //获取这个选择状态的复选框的值然后往数组最后一个位置添加元素
                ids.push(checkItem[i].value);
            }
        }

        if(ids.length > 0){
            if(confirm("您确认要删除吗?")){
                location.href = "/emp/delemps?ids="+ids;
            }
        }else{
            alert("没有被选中的元素不能删除");
        }

    }

    /**
     * 点击下面的复选框事件
     *  实现的功能：
     *      如果下面的复选框不是全部都选中，上面的全选框变成不选中状态
     *      如果下面的复选框是全部选中状态，上面的全选框变成选中状态
     */
     function checkItems() {
        //获取所有的复选框标签对象
        var checkAll = document.getElementById("checkAll");
        var checkItem = document.getElementsByName("checkItem");

        var count = 0; //计数器

        //遍历数组，统计下面复选框被选中的个数
        for(var i = 0; i < checkItem.length; i++){
            if(checkItem[i].checked){ //表示当前复选框为选中状态
                count++;
            }
        }

        if(count == checkItem.length){
            checkAll.checked = true;
        }else{
            checkAll.checked = false;
        }


    }


    /**
     * 实现全选功能
     *      实现效果：点击id=checkAll的复选框
     *              下面所有name=checkItem的复选框的状态和上面的复选框的状态保持一致
     *      状态:表示选中和不选中 checked 选中值为true，不选中值为false
     */
    function checkAlls() {
        //获取所有的复选框
        var checkAll = document.getElementById("checkAll");
        var checkItem = document.getElementsByName("checkItem");

        //把checkAll标签的状态赋值给checkItem数组
        for(var i = 0 ; i < checkItem.length ; i++){
            checkItem[i].checked = checkAll.checked;
        }

    }

</script>
</body>
</html>
